<!DOCTYPE HTML>
<html>
    <head>
        <title>Pannellum Embed Configuration</title>
        <meta charset="utf-8">
        <link type="text/css" rel="Stylesheet" href="css/pannellum.css" />
        <script>
            function processForm(form) {
                var embed_code = document.getElementById('embed_code');
                embed_code.innerHTML = '<iframe' +
                    ' width="' + escape(form.embed_width.value) +
                    '" height="' + escape(form.embed_height.value) +
                    '" allowfullscreen style="border-style:none;' +
                    '" src="' + escape(form.pannellum_url.value) +
                    '?panorama=' + escape(form.pano_url.value);
                    if(form.pano_title.value != '')
                        embed_code.innerHTML += '&amp;amp;title=' + escape(form.pano_title.value);
                    if(form.pano_author.value != '')
                        embed_code.innerHTML += '&amp;amp;author=' + escape(form.pano_author.value);
                    if(form.autoload.checked)
                        embed_code.innerHTML += '&amp;amp;autoLoad=true';
                    if(form.autorotate.value != 'none')
                        embed_code.innerHTML += '&amp;amp;autoRotate=' + escape(form.autorotate.value);
                    if(form.fallback_url.value != '')
                        embed_code.innerHTML += '&amp;amp;fallback=' + escape(form.fallback_url.value);
                    if(form.hfov.value != 0)
                        embed_code.innerHTML += '&amp;amp;hfov=' + escape(form.hfov.value);
                    if(form.pitch.value != 0)
                        embed_code.innerHTML += '&amp;amp;pitch=' + escape(form.pitch.value);
                    if(form.yaw.value != 0)
                        embed_code.innerHTML += '&amp;amp;yaw=' + escape(form.yaw.value);
                    if(form.preview_url.value != '')
                        embed_code.innerHTML += '&amp;amp;preview=' + escape(form.preview_url.value);
                    if(form.haov.value != 0)
                        embed_code.innerHTML += '&amp;amp;haov=' + escape(form.haov.value);
                    if(form.vaov.value != 0)
                        embed_code.innerHTML += '&amp;amp;vaov=' + escape(form.vaov.value);
                    if(form.voffset.value != 0)
                        embed_code.innerHTML += '&amp;amp;vOffset=' + escape(form.voffset.value);
                    embed_code.innerHTML += '"></iframe>';
                return false;
            }
        </script>
    </head>

    <body>
        <form name="embed_gen_form" onsubmit="return processForm(embed_gen_form); return false;">
            Pannellum Location:<br>
            <input name="pannellum_url" placeholder="pannellum.htm Location" required><p>
            Panorama URL:<br>
            <input name="pano_url" placeholder="Image File" required><p>
            Panorama Preview URL (optional):<br>
            <input name="preview_url" placeholder="Image File"><p>
            Basic Information:<br>
            <input name="pano_title" placeholder="Title"> <input name="pano_author" placeholder="Author"><p>
            Partial Panorama (degrees) (optional):<br>
            <input name="haov" type="number" min="0" max="360" placeholder="Horizontal Angle of View"> <input name="vaov" type="number" min="0" max="180" placeholder="Vertical Angle of View"> <input name="voffset" type="number" min="-90" max="90" placeholder="Vertical Offset"><p>
            Embed Size:<br>
            <input name="embed_width" type="number" min="200" placeholder="Width" required> <input name="embed_height" type="number" min="150" placeholder="Height" required><p>
            Initial Parameters (degrees) (optional):<br>
            <input name="hfov" type="number" min="40" max="100" placeholder="Horizontal Field of View"> <input name="pitch" type="number" min="-85" max="85" placeholder="Pitch"> <input name="yaw" type="number" min="-180" max="180" placeholder="Yaw"><p>
            Auto Load: <input name="autoload" type="checkbox"><p>
            Auto Rotate:
            <select name="autorotate">
                <option value="none">None</option>
                <option value="cw">CW</option>
                <option value="ccw">CCW</option>
            </select><p>
            URL to fall back to if WebGL is not supported:<br>
            <input name="fallback_url" placeholder="Fallback URL"><p>
            <input type="submit" value="Generate" onclick="document.getElementById('embed_code').innerHTML = ''"><p>
        </form>

        <textarea id="embed_code" style="resize: none; height:200px;" onclick="this.select()" cols="100" readonly></textarea>
    </body>
</html>
